<template>
    <div class="menu">
      <div class="menu_left">
        <ul>
          <li v-for="item in m_list" :class="[type==item.picType?'active':'']" v-if="item.picType == type" @click="classify(item)">{{item.label}}</li>
        </ul>
      </div>
      <div class="menu_right">
        <div class="menu_btn"  style="overflow: hidden">
          <el-upload
            style="float: left"
            class="upload-demo"
            :action="'/manage/api/manage/photo/uploadPhoto'"
            :headers="headers"
            :on-success="uploadPhotoSuccess"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :show-file-list="false"
            :data="obj">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
          <div style="float: right;width: 310px;overflow: hidden;">
          <!--<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>-->
            <el-input placeholder="请输入名称" v-model="searchText" style="float: left;width: 235px;margin-right: 15px" />
            <el-button type="primary" size="small" @click="search(page)" style="height: 36px;float: right;" class="search-btn">搜索</el-button>
          </div>
        </div>
        <ul v-if="imgList.length">
          <li v-for="item in imgList">
            <el-checkbox @change="handleCheckedCitiesChange" v-model="item.checked" :checked="item.checked"></el-checkbox>
            <div class="lab_div" @click="getList(item)">
              <el-image
                style="width: 140px; height: 140px"
                :src="item.picUrl"
                fit="fill"></el-image>
              <p>{{item.picName}}</p>
            </div>
          </li>
        </ul>
        <div v-else>
          <p style="text-align: center;line-height: 450px">暂无数据</p>
        </div>
        <div style="width: 100%;text-align: center">
          <el-pagination
            small
            :page-size="page.size"
            @prev-click="prev"
            @next-click="next"
            @current-change="currentChange"
            :current-page="page.current"
            layout="prev,pager,next"
            :total="page.total">
          </el-pagination>
        </div>
        <div style="text-align: right">
          <el-button size="small" type="primary" @click="selectImgs">确定</el-button>
        </div>
      </div>
    </div>
</template>

<script>
  import {
    fetchList
  }from '@/api/manage/photogallery';
  import {getStore, setStore} from "@/util/store";
  import Request from "./request";
  import store from "@/store"; 
  export default {
    props: {
      type: String,
    },
    data: function(){
      return {
        headers: {
            Authorization: 'Bearer ' + store.getters.access_token,
            'TENANT-ID': getStore({name: 'tenantId'}),
        },
        request: new Request(),
        page: {
          total: 0, // 总页数
          current: 1, // 当前页数
          size: 20 // 每页显示多少条
        },
        imgList:[],
        m_list:[{
          label:'门店照片',
          picType:'00'
        },{
          label:'商户照片',
          picType:'01'
        },{
          label:'协议文件',
          picType:'02'
        },{
          label:'商品照片',
          picType:'03'
        },{
          label:'餐饮许可证',
          picType:'04'
        },{
          label:'营业执照',
          picType:'05'
        },{
          label:'结算卡或对公账户',
          picType:'06'
        },{
          label:'身份证正反面',
          picType:'07'
        },{
          label:'账单图片',
          picType:'08'
        },{
          label:'退货图片',
          picType:'09'
        },{
          label:'留影图片',
          picType:'10'
        },{
          label: '上报图片',
          picType: '11',
        },{
          label: '员工图片',
          picType: '12',
        }],
        picType:'',
        selectionList:[],
        fileList:[],
        obj:{
          shopId:  getStore({name: "shopId"}),
          pmId:  getStore({name: "pmId"}),
          type:''
        },
        searchText:''
      }
    },
    created(){
      this.getImgList(this.page)
      this.obj.type = this.type;
    },
    methods:{
      //获取图片资源列表
      getImgList(page){
        let params = {
          size:page.size,
          current:page.current,
        }
        if(this.type){
          params.picType = this.type;
        }
        if(this.searchText){
          params.picName = this.searchText;
        }
        fetchList(params).then(res =>{
          this.page.total = res.data.data.total;
          res.data.data.records.forEach((item)=>{
            item.checked = false;
          })
          this.imgList = res.data.data.records;
        })
      },
      search(){
        if(this.searchText){
          this.page = {
            total: 0, // 总页数
            current: 1, // 当前页数
            size: 1000 // 每页显示多少条
          }
        }else{
          this.page = {
            total: 0, // 总页数
            current: 1, // 当前页数
            size: 20 // 每页显示多少条
          }
        }
        this.getImgList(this.page);
      },
      prev() {
        let params = {};
        this.page.current = this.page.current - 1;
        this.getImgList(this.page, params);
      },
      next() {
        let params = {};
        this.page.current = this.page.current + 1;
        this.getImgList(this.page, params);
      },
      currentChange(val){
        let params = {};
        this.page.current = val;
        this.getImgList(this.page, params);
      },
      handleCheckedCitiesChange(value){
        console.log(value);
      },
      getList(item){
        item.checked = !item.checked;
      },
      selectImgs(){
        this.imgList.forEach((item)=>{
          if(item.checked == true){
            this.selectionList.push(item);
          }
        })
        this.$emit('select', this.selectionList)
        this.imgList.forEach((item)=>{
          item.checked = false;
        })
        this.selectionList = [];
      },
      //切换分类
      classify(item){
        this.picType = item.picType;
        this.getImgList(this.page);
      },
      getAll(){
        this.picType = '';
        this.getImgList(this.page);
      },
      //上传
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      uploadPhotoSuccess(res){
        this.getImgList(this.page);
        if(res.code == 0){
          this.$message.success(res.msg);
        }else{
          this.$message.error(res.msg);
        }
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      }
    }
  }
</script>

<style scoped lang="scss">
  .menu{
    overflow: hidden;
    padding: 0;
    border: 0;
  }
  .menu_left{
    overflow: hidden;
    background-color: #f7f7f7;
    float: left;
    width: 140px;
  }
  .menu_left ul{
    overflow: hidden;
  }
  .menu_left ul li{
    border-bottom: 1px solid #dddddd;
    text-indent: 10px;
    line-height: 50px;
  }
  .menu_right{
    overflow: hidden;
    margin-left: 150px;
  }
  .menu_right ul{
    margin-top: 15px;
    overflow: auto;
    max-height: 458px;
  }
  .menu_right ul li{
    float: left;
    width: 140px;
    height: 190px;
    margin: 0 22px 10px;
    border: 1px solid #dadbe0;
    text-align: center;
    position: relative;
  }
  .menu_right ul li .el-image{
    max-width: 100%;
    width: 100%;
    border-bottom: 1px solid #dadbe0;
  }
  .menu_right ul li p{
    line-height: 16px;
    margin: 0 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient: vertical;
  }
  .el-checkbox{
    position: absolute;
    top: 0;
    right: 10px;
  }
  .lab_div{
    overflow: hidden;
  }
  .el-checkbox__inner{
    left: 120px;
  }
  ul .active{
    background-color:#3a8ee6;
    color: #fff;
  }
</style>
